<template>
    <el-container class="home-container" v-loading="loading">
      <!-- 头部区域 -->
      <el-header>
        <div class="logo">
          <img src="../../assets/img/login/logo.png" alt="">
          <span>电商后台</span>
        </div>
        <el-button type="danger" @click="logout"  v-loading.fullscreen="outLoading">退出</el-button>
      </el-header>
      <!-- 页面主体 -->
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="zils">
          <div class="toggle-button" @click="toggleCollapse">
            <i :class="arrow"></i>
          </div>
          <!-- 侧边栏区域 -->
           <el-menu :collapse="isCollapse" 
                    :collapse-transition="false" 
                    unique-opened background-color="#1f2623" 
                    text-color="#fff" active-text-color="#12a182"
                    router :default-active="$route.path" >
             <!-- 一级菜单 -->
            <el-submenu v-for="(item,index) in menuList" :index="String(index)"  :key="item.id" >
              <!-- 一级菜单模板区域 -->
              <template slot="title">
                <!-- 图标 -->
                <i :class="{iconfont:true,[iconsNall[item.path]]:true}"></i>
                <!-- 文本 -->
                <span>{{item.authName}}</span>
              </template>

              <el-menu-item v-for="subItem in item.children" 
                            :key="subItem.id" :index="'/'+subItem.path">

                <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{subItem.authName}}</span>
              </template>
              </el-menu-item>
              
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧内容 -->
        <el-main >
          <router-view ></router-view>
        </el-main>

      </el-container>
    </el-container>
</template>

<script>
export default {
  created(){
    this.getMenuList()
    this.$nextTick(()=>{
      this.loading=false
    })
  }
 ,data(){return {
   menuList:[]
  ,iconsNall:{
    "users": "icon-users"
  ,"rights": "icon-3702mima"
  ,"goods": "icon-shangpin"
  ,"orders": "icon-danju"
  ,"reports": "icon-baobiao"
  }
  ,isCollapse:false
  ,outLoading:false
  ,loading:true
 }}
 ,methods:{
    logout(){
      
      //清除session的通行证
      window.sessionStorage.clear()
      let redir=1500
      //退出时的遮挡曾
      this.outLoading= true
      //延迟后退出
      setTimeout(()=>{
        this.$router.push("/login")
        this.$message({
         type:"success"
        ,duration:redir
        ,message:"退出成功"
        ,center:"center"
        ,customClass:'logout'
      })
      },redir)  
    
    }
    //获取菜单
   ,async getMenuList(){
     let {data:res}= await this.$XHR.get('menus').catch(i=>{
       this.erOut()
     })
     if(res?.meta?.status!==200 || !(res?.meta?.status)) return this.$message({
       type:"error"
      ,message:"获取菜单失败"
      ,center:"center"
     });
     this.menuList.push(...res.data)
   }
   //点击折叠菜单
   ,toggleCollapse(){
     this.isCollapse=!this.isCollapse
   }
   ,erOut(){
     window.sessionStorage.clear()
       this.$message({
         type:"error"
        ,message:"出差啦!,即将退出"
        ,center:"center"
        ,customClass:'logout'
      })
      setTimeout(()=>{
        this.$router.push("/login")
      },2000)
   }
  }
  ,computed:{
    zils(n){
      return n.isCollapse ?"64px":'200px' 
    }
    ,arrow(n){
      return n.isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left'
    }
  }
}
</script>
<style lang="less" scoped>
.home-container{
  height: 100vh;
   
  .el-header{
    background-color: #1f2623;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 20px;
    .logo{
      margin-top: 5px;
    }
    >div{
      display: flex;
      align-items: center;
      height: 100%;
      img{
        height: 100%;
      }
      span{
        margin-left: 15px;
      }
    }
  }
  .el-aside{
    background-color: #1f2623;
    
    .toggle-button{
      background-color: #2d3531;
      font-size: 15px;
      line-height: 34px;
      color: #fff;
      text-align: center;
      letter-spacing: 0.2em;
      cursor: pointer;
    }
    .el-menu{
      border: none;
    }
    .iconfont{
      margin-right: 8px;
    }
  }
  .el-main{
   background-color: #e4f1ce;
  //  height: calc(100vh - 60px);
  }
  
}

</style>